<template>
  <div class="home">
    <div class="search">
      <i class="iconfont icon-ditu-dibiao" @click="goback()"></i>
      <van-search
        background="#ff5555"
        placeholder="搜索您想住的区域或小区"
        @click="goback1()"
      />
      <span class="iconfont icon-xiaoxi" @click="goback2()"></span>
    </div>
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> -->
    <!-- <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
    </van-swipe> -->
    <button class="btn4" @click="goback3()">找室友</button>
    <button class="btn5" @click="goback4()">宜居社区</button>
    <h1>热门房源</h1>
    <div class="housing">
      <div class="dongtaiHouse" v-for="(item, index) in houseList" :key="index">
        <div v-if='item.supporting==0'>
          <img :src="imglist[item.imgUrl]" alt="" />
          <div class="details-on">
            <ul>
              <li>{{ item.description }}</li>
              <li v-if="item.floor==0">一室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor==1">两室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor==2">三室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor==3">三室两厅 {{ item.areaId }}</li>
              <li v-if="item.floor==4">四室一厅 {{ item.areaId }}</li>
            </ul>
            <h1>整租</h1>
            <h2>{{ item.price }}元/月</h2>
          </div>
        </div>
      </div>
      <div class="cheng"></div>
    </div>
    <shouye activeColor=0></shouye>
  </div>
</template>

<script>
// import { createApp } from "vue";
// import { Swipe, SwipeItem } from "vant";
import shouye from "../../components/shouyeUnder.vue";
import { getHouse } from "../../api/index";
export default {
  data() {
    return {
      houseList: [],
      imglist: [
        //    动态绑定src需要用require
        require("../../assets/image/banner1(1).png"),
        require("../../assets/image/banner2.png"),
        require("../../assets/image/banner3.png"),
        require("../../assets/image/banner4.png"),
        require("../../assets/image/banner5.png"),
        require("../../assets/image/banner6.png"),
      ],
    };
  },
  methods: {
    goback() {
      this.$router.replace({ name: "location" });
    },
    goback1() {
      this.$router.replace({ name: "hotsearch" });
    },
    goback2() {
      this.$router.replace({ name: "mynews" });
    },
    goback3() {
      this.$router.replace({ name: "roommate" });
    },
    goback4() {
      this.$router.replace({ name: "community" });
    },
    async getHouseList() {
      //  1.获取房屋列表
      let {
        data: {
          data: { result },
          meta: { status, msg },
        },
      } = await getHouse();
      console.log(result);
      console.log(status);
      console.log(msg);
      if (status != 200) return Notify({ type: "warning", message: msg });
      this.houseList = result;
    },
  },



  components: {
    shouye,
  },
  created() {
    this.getHouseList();
  },
};
</script>

<style scoped lang="less">
.home {
  height: 100%;
  .search {
    background-color: #ff5654;

    i {
      color: #fff;
      padding-left: 30px;
      font-size: 40px;
    }
    span {
      color: #fff;
      font-size: 40px;
      padding-left: 10px;
    }
    .van-search {
      display: inline-block;
      width: 80%;
    }
  }
  // width: 100%;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .btn4,
  .btn5 {
    border: 1px solid #ff5654;
    width: 330px;
    text-align: center;
    height: 120px;
    border-radius: 5px;
    margin: 40px 0 0 30px;
    background-color: #ff5654;
    color: #fff;
    font-size: 32px;
  }
  h1 {
    font-size: 24px;
    color: #796363;
    opacity: 80%;
    margin: 40px 0 0 40px;
  }
  .housing {
    height: 100%;
    // width: 380px;
    // float: left;
    .dongtaiHouse {
      position: relative;
      img {
        width: 700px;
        height: 400px;
        margin: 30px 0 0 25px;
      }
      .details-on {
        width: 100%;
        height: 140px;
        background-color: #fff;
        opacity: 70%;
        position: absolute;
        // left: 0px;
        bottom: 0px;
        ul {
          float: left;
          li {
            width: 400px;
            font-size: 20px;
            // color: #000000;
            // opacity: 90%;
            margin: 30px 0 10px 60px;
          }
        }
        h1 {
          width: 90px;
          height: 40px;
          border: 1px solid #618698;
          border-radius: 5px;
          color: #618698;
          margin: 25px 0 0 450px;
          text-align: center;
          padding: 5px 5px;
        }
        h2 {
          color: #ff5555;
          font-size: 16px;
          margin: 15px 0 0 240px;
        }
      }
      .details-in {
        width: 700px;
        height: 140px;
        background-color: #fff;
        opacity: 70%;
        position: absolute;
        left: 25px;
        top: 1078px;
        ul {
          float: left;
          li {
            width: 400px;
            font-size: 20px;
            // color: #000000;
            // opacity: 90%;
            margin: 30px 0 10px 60px;
          }
        }
        h1 {
          width: 90px;
          height: 40px;
          border: 1px solid #618698;
          border-radius: 5px;
          color: #618698;
          margin: 25px 0 0 450px;
          text-align: center;
          padding: 5px 5px;
        }
        h2 {
          color: #ff5555;
          font-size: 16px;
          margin: 15px 0 0 240px;
        }
      }
    }
  }
  .cheng {
    height: 100px;
    widows: 100px;
  }
}
</style>